import { useState, useEffect } from 'react';
import { Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import CommonLoading from '@/components/CommonLoading';
import { getarticleDetailOp } from '../../service';
import styles from './index.module.less';

const baseBoardData = [
  { path: '', title: '待审核', field: ''},
  { path: '', title: '待付款', field: ''},
  { path: '', title: '待拿货', field: ''},
  { path: '', title: '待包装', field: ''},
  { path: '', title: '待发货', field: ''},
  { path: '', title: '今日已发货', field: ''},
  { path: '', title: '异常订单', field: ''},
]

const DataBoard = ({ type, handleSetType }) => {

  const [loading, setLoading] = useState(false);
  const [detailsObj, setDetail] = useState({});

  useEffect(()=>{
    getDetailDataFunc();
  }, [])

  const getDetailDataFunc = async () => {
    const { data, success } = await getarticleDetailOp({ id: type });
    if(success){
-      setDetail(data || {});
    }
  }

  const { title, createTime, content } = detailsObj;

  return (<>
   <Breadcrumb>
      <Breadcrumb.Item onClick={()=>handleSetType('')} style={{cursor:'pointer'}}>
        <HomeOutlined />
      </Breadcrumb.Item>
      <Breadcrumb.Item onClick={()=>handleSetType('-999')} style={{cursor:'pointer'}}>产品更新</Breadcrumb.Item>
      <Breadcrumb.Item>更新详情</Breadcrumb.Item>
    </Breadcrumb>
    <br />
    <h3 className={styles.artivleTitle}>{title}</h3>
    <p className={styles.createTime}>{createTime}</p>
    <div className={`${styles.articleContent} ${styles.editContent}`} dangerouslySetInnerHTML={{__html:content?.replace(/\s{3}/g, '<span style="display:inline-block;width:18px"></span>')}}></div>
    <CommonLoading loading={loading} />
  </>)

}

export default DataBoard;